<template>
	<div class="app">
		<div>
			<button @click="change">切换</button>
		</div>

		<transition name="why">
			<h2 v-if="isShow">
				Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque reiciendis debitis natus et praesentium
				similique porro deleniti, odit doloribus, rem tempora incidunt fugit corrupti ad, facere vero architecto
				saepe molestias.
			</h2>
		</transition>
	</div>
</template>

<script setup>
	import { ref } from 'vue'
	const isShow = ref(false)

	const change = () => {
		isShow.value = !isShow.value
	}
</script>

<style scoped>
	h2 {
		display: inline-block;
	}

	.why-enter-active {
		animation: whyAnim 2s ease;
	}

	.why-leave-active {
		animation: whyAnim 2s ease reverse;
		/* animation: whyLeaveAnim 2s ease; */
	}

	@keyframes whyAnim {
		0% {
			transform: scale(0);
			opacity: 0;
		}

		50% {
			transform: scale(1.2);
			opacity: 1.5;
		}

		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	@keyframes whyLeaveAnim {
		0% {
			transform: translateX(0);
			opacity: 1;
		}

		100% {
			transform: translateX(-500px);
			opacity: 0;
		}
	}
</style>
